@import 'css/config.scss';

.form-group {
    
    .prompt-input-container {
        position: relative;
        width: 100%;
        height: 164px;
        background: #17171B;
        border: 1px solid  #17171B;;
        margin-bottom: 20px;
        padding: 12px;
        transition: all 0.3s ease;
        border-radius: 4px;
       
       
        
        &:focus-within {
            border: 1px solid $primary-color;

            .prompt-input-counter-num {color:#4C1BFF!important}

        }

        &.prompt-input-container-error {
            border: 1px solid #FF1B41;
            .prompt-input-counter-num {color:#FF1B41!important}

        }

        
        .prompt-input {
            width: 100%;
             height: 120px;
             background: transparent;
             border: none;
             resize: vertical;
             color: #686B86;
             resize: none;
              &::placeholder {
                color: #424554;
              }
     
             &:focus {
                 outline: none;
             }
             
         }
            
    }
    .size-param {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: 1fr 1fr;
        row-gap: 4px;
        column-gap: 2px;
        margin-bottom: 20px;

        

        .size-item {
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 48.8px;
            padding: 8px;
            height: 46px; 
            background: #17171B;
            padding-bottom: 8.35px;
            color: $gray;
            transition: all 0.3s ease;
            font-size: 12px;
            border-radius: 4px;
            .size-item-rect {
                 transition: all 0.3s ease;
            }
            p {
                margin-top: 4px;
            }
            &.size-item-active {
                
                color: $primary-color;
                .size-item-rect {
                    border: 1px solid $primary-color;
                }
            } 
            .size-item-rect {
                border: 1px solid #8F91A8;
            }
            
        }
        .first-item {
            height: 96px;
            grid-column: 1;           /* 第1列 */
            grid-row: 1 / span 2;   

          }

        
    }
    .num-param {
        display: flex;
        justify-content: space-between;

        .num-item {
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 76px;
            height: 32px; 
            background: #101010; 
            transition: all 0.3s ease;
            border: 1px solid transparent;
            color: $gray;
            &.num-item-active {
                background: #100F11;
                color: #fff;
                border: 1px solid $primary-color;
            }     
        }
    }
    .image-upload-container {
        display: flex;
        justify-content: space-between;
        .file-upload-container {
           width: 165px;
           height: 113px; 
           .file-upload-text {
            img {
                margin-bottom: 4px;
            }
           }
        }
    }

    .modelset-content {
        display: flex;
        gap: 8px;
        &-item {
            width: calc(50% - 4px);
            &-title {
                font-size: 12px;
                font-weight: normal;
                line-height: 14px;
                letter-spacing: normal;
                color: #8F91A8;
                margin-bottom: 8px;
            }
        }
    }
   
}